<template>
    <div class="info">
        <div class="info-left">
            <div class="title">
                <strong>企业信息</strong>
            </div>
            <div class="info-left-bottom">
                <el-row>
                    <el-col :span="12">
                        <div class="info-row">
                            <el-icon :size="18" color="#01509f">
                                <span class="iconfont icon-qiye"></span>
                            </el-icon>
                            <span>企业名称：{{ currentComanyInfo?.name }}</span>
                            <img :src="certifiedSVG" style="width: 16px; height: 16px;"
                                v-if="currentComanyInfo?.status === 1" />
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-row">
                            <el-icon :size="18" color="#01509f">
                                <span class="iconfont icon-tongyishehuixinyongdaima"></span>
                            </el-icon>
                            <span>统一社会信用代码：{{ currentComanyInfo?.social_credit_code }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-row">
                            <el-icon :size="18" color="#01509f">
                                <span class="iconfont icon-feiqiyefaren"></span>
                            </el-icon>
                            <span>法定代表人：{{ currentComanyInfo?.legal_person }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-row">
                            <el-icon :size="18" color="#01509f">
                                <span class="iconfont icon-hrstaffarchives"></span>
                            </el-icon>
                            <span>员工数量：{{ currentComanyInfo?.user_count }}人</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="change-manager" @click="showDialog = true">
                <el-icon :size="18" color="#01509f">
                    <span class="iconfont icon-zhuanrang"></span>
                </el-icon>
                <span>转让管理员</span>
            </div>
        </div>
        <div class="info-right">
            <div class="reid">企业信息发生变化？<span @click="reId">重新认证</span></div>
            <img src="../../../assets/enterprise/icon01.png">
        </div>
        <ChooseUser v-model="showDialog" @submit-user-id="handleSuccess" />
        <VerifyAccount v-model="showVerify" :loading="loading" @submit-success="handleVerifySuccess" />
    </div>
</template>
<script setup lang="ts">
import { ChangeAdmin } from '@/api/enterprise';
import ChooseUser from '@/components/ChooseUser.vue';
import VerifyAccount from '@/components/VerifyAccount.vue';
import { useCompanyDataStore } from '@/store/companys';
import { computed, ref } from '@/TUIKit/adapter-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import certifiedSVG from "../../../assets/icon/certified.svg";

const companyDataStore = useCompanyDataStore()
const currentComanyInfo = computed(() => companyDataStore.currentComanyInfo)

const router = useRouter();
const showDialog = ref(false)
const showVerify = ref(false)
const userSelectedId = ref(0)
const loading = ref(false)

const reId = () => {
    companyDataStore.setCertifyCompany(currentComanyInfo.value)
    router.push({ path: '/myEnterprise/certify' });
}

const handleSuccess = (id: number) => {
    userSelectedId.value = id
    showVerify.value = true
}

interface VerifyData {
    phone: string;
    code: string;
}

const handleVerifySuccess = (data: VerifyData) => {
    loading.value = true
    ChangeAdmin({
        user_id: userSelectedId.value,
        mobile: data.phone,
        code: data.code
    }).then(async () => {
        showVerify.value = false
        loading.value = false
        ElMessage.success({
            message: '操作成功'
        })
        await companyDataStore.init()
        router.replace({ path: '/home' })
    }).catch(() => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.info {
    flex: 1;
    min-height: 195px;
    border-radius: 10px;
    background-image: linear-gradient(#e6f1ff, #f3f9ff);
    display: flex;
    justify-content: space-between;

    .iconfont {
        font-size: 18px;
    }

    .info-left {
        flex: 1;

        .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 25px 0 0 15px;

            strong {
                font-size: 20px;
                color: #333;
            }
        }

        .info-left-bottom {
            padding-left: 15px;
            padding-right: 150px;

            .info-row {
                display: flex;
                align-items: center;
                font-size: 16px;
                margin-top: 15px;

                span {
                    margin-left: 5px;
                }
            }
        }

        .change-manager {
            width: 111px;
            height: 28px;
            border: solid 1px #01509f;
            color: #01509f;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 18px 0 0 15px;
            border-radius: 5px;
            cursor: pointer;

            span {
                margin-left: 5px;
                font-size: 14px;
            }
        }
    }

    .info-right {
        margin: 25px 20px 0 15px;
        padding-bottom: 25px;

        .reid {
            color: #999;
            font-size: 16px;
            margin-bottom: 20px;

            span {
                color: #01509f;
                cursor: pointer;
            }
        }

        img {
            width: 182px;
            height: 166px;
        }

    }

}
</style>
